<style type="text/css">
.mach-links{
	padding: 15px 5px 5px 5px;
}
.mach-links ul:after{
	content: '';
	display:block;
	clear: both;
}
.mach-links ul{
	margin-bottom:10px;
}
.mach-links ul li{
	width:25%;
	float: left;
	overflow: hidden;
	position: relative;	
}
.mach-links ul li span,.mach-links ul li em{
	display: block;
	width:60px;
	overflow: hidden;
	margin: auto;
	text-align: center;
	position: relative;
}
.mach-links ul li span{
	border-radius: 50%;
	background: #23C075;
	color: #FFF;
}
.mach-links ul li em{
	height: 20px;
	overflow: hidden;
	font-size:14px;
}
.mach-links ul li:nth-child(2) span{
	background: #F90;
}
.mach-links ul li:nth-child(3) span{
	background: #B01FE0;
}
.mach-links ul li:nth-child(4) span{
	background: #133CD7;
}
.mach-links ul li span:before{
	content: '';
	display: block;
	padding-top: 100%;
}
.mach-links ul li span i{
	position: absolute;
	left:50%;
	top: 50%;
	font-size:30px;
  -webkit-transform: translate3D(-50%, -50%, 0);
      -ms-transform: translate3D(-50%, -50%, 0);
          transform: translate3D(-50%, -50%, 0);
}
</style>
{qb:hy name="labelmodel_links" type="links" val="listdb"}
<!--<a href="#">这是导航链接,请自由设置添加链接</a>-->
<div class="mach-links">
	{volist name=":array_chunk($listdb,4,true)" id="array"}
	<ul>
		{volist name="$array" id="rs"}
			<li><a href="{$rs.url}"><span style="{notempty name='$rs.bgcolor'}background-color:{$rs.bgcolor};{/notempty}"><i class="{$rs.icon|default='fa fa-leaf'}"></i></span><em {notempty name='$rs.font_color'}style="color:{$rs.font_color};"{/notempty}>{$rs.title}</em></a></li>
		{/volist}
	</ul>
	{/volist}
</div>
{/qb:hy}
